<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button @click="testSequelize">el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  methods: {
    testSequelize() {
      console.log('clicked')
      const Sequelize = require('sequelize')

      const config = require('./config/config.json').dev
      const sequelize = new Sequelize(config.database, config.username, config.password, {
          host: config.host,
          port: config.port,
          dialect: config.dialect
      });

      try {
          sequelize.authenticate();
          console.log('Connection has been established successfully.');
      } catch (error) {
          console.error('Unable to connect to the database:', error);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
